<template>
  <view class="tag-box">
    <view v-for="(item, index) in existTagList" :key="index" class="tag-item green" @tap="handleTagClick(item)">
      <text class="" >
        {{ item.honorName }}
      </text> 
    </view>
  </view>
</template>

<script setup>
import {defineProps, defineEmits, ref, computed, nextTick} from "vue";

const props = defineProps({
  labelData: {
    type: Array,
    default: [],
  },
  typeName: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(['handleTagClick'])
const handleTagClick = tag => {
  emits('handleTagClick', tag)
}

const existTagList = computed(() => {
  return props.labelData.filter(item => item.isExist)
})

</script>

<style lang="less" scoped>
@import "@/static/style/global.less";

.tag-box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  .tag-item {
    width: 296rpx;
    min-height: 60rpx;
    padding: 20rpx 15rpx;
    border: 1rpx solid @color-green;
    border-radius: 7rpx;
    font-size: 23rpx;
    color: @color-green;
    text-align: center;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // overflow: hidden;
    margin: 10rpx 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    &.green {
      border: 1rpx solid @color-green;
      color: @color-green;
    }

    &.grey {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 1px solid @color-grey;
      color: @color-grey;

      .text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .u-icon {
        margin-left: 18rpx;
      }
    }
  }

  .u-button {
    margin-top: 20rpx;

    :deep(.u-icon) {
      margin-right: 20rpx;

      .u-icon__icon {
        font-size: 28rpx !important;
      }
    }
  }
}
</style>
